import 'package:flutter/material.dart';
import 'package:flutter_base/config/app_color.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:flutter_base/base/widget/base_get_builder.dart';
import 'package:flutter_base/widgets/button/common_button.dart';
import 'package:flutter_base/generated/assets.dart';
import 'package:flutter_base/widgets/image/auto_image.dart';
import 'package:flutter_base/widgets/verify_input_box/verification_box.dart';
import 'email_verification_logic.dart';

class EmailVerificationPage extends StatelessWidget {
  final logic = Get.put(EmailVerificationLogic());

  EmailVerificationPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BaseGetBuilder<EmailVerificationLogic>(
      backgroundColor: AppColor.colorF5F7FA,
      builder: (_) {
        return GestureDetector(
          onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
          child: Stack(
            children: [
              // 背景图
              const Positioned.fill(
                child: AutoImage(
                  Assets.accountBg,
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.topCenter,
                ),
              ),

              Scaffold(
                backgroundColor: Colors.transparent,
                appBar: AppBar(
                  backgroundColor: Colors.transparent,
                  elevation: 0,
                  leading: GestureDetector(
                    onTap: () => Get.back(),
                    child: Padding(
                      padding: EdgeInsets.all(16.w),
                      child: AutoImage(
                        Assets.arrowBackWhite,
                        width: 24.w,
                        height: 24.w,
                        color: AppColor.color0C0A09,
                      ),
                    ),
                  ),
                ),
                body: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _buildHeader(),
                    SizedBox(height: 56.w),
                    _buildVerificationBoxes(),
                    if (logic.hasError) _buildErrorMessage(),
                    // const Spacer(),
                    // _buildResendButton(),
                    // SizedBox(height: 48.w),
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget _buildHeader() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Enter the verification code',
            style: TextStyle(
              fontSize: 28.sp,
              fontWeight: FontWeight.w600,
              color: AppColor.color0C0A09,
            ),
          ),
          SizedBox(height: 12.w),
          RichText(
            text: TextSpan(
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
              ),
              children: [
                const TextSpan(
                  text: 'Please enter the email sent to ',
                  style: TextStyle(color: AppColor.color7F909E),
                ),
                TextSpan(
                  text: logic.email,
                  style: const TextStyle(color: AppColor.color0C0A09),
                ),
              ],
            ),
          ),
          SizedBox(height: 4.w),
          RichText(
            text: TextSpan(
              text: 'four-digit password',
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w500,
                color: AppColor.color7F909E,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildVerificationBoxes() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      child: VerificationBox(
        count: 6,
        itemWidget: 48.w,
        // itemHeight: 48.w,
        borderWidth: 1.0,
        borderRadius: 16.0,
        focusBorderColor: AppColor.primary,
        // borderColor: AppColor.primary,
        borderColor:  Colors.transparent,
        // borderColor: AppColor.errorColor,
        backgroundColor: Colors.white,
        showCursor: true,
        obscureText: false,

        // errorBorderColor: AppColor.errorColor,
        // showError: logic.hasError,
        // errorBgColor: Colors.white,
        textStyle: TextStyle(
          fontSize: 24.sp,
          fontWeight: FontWeight.w600,
          color: logic.hasError ? AppColor.errorColor : AppColor.color0C0A09,
        ),
        // focusedTextStyle: TextStyle(
        //   fontSize: 24.sp,
        //   fontWeight: FontWeight.w600,
        //   color: AppColor.primary,
        // ),
        cursorColor: AppColor.primary,
        cursorWidth: 2.w,
        // cursorHeight: 20.w,
        autoFocus: true,
        onSubmitted: (code) => logic.verifyCode(code),
        onValueChanged: (code) => logic.onCodeChanged(code),
      ),
    );
  }

  Widget _buildErrorMessage() {
    return Padding(
      padding: EdgeInsets.only(left: 24.w, top: 4.w),
      child: Row(
        children: [
          Container(
            width: 16.w,
            height: 16.w,
            alignment: Alignment.center,
            child: Icon(
              Icons.error_outline,
              size: 16.w,
              color: AppColor.errorColor,
            ),
          ),
          SizedBox(width: 4.w),
          Text(
            'The verification code is incorrect, please re-enter',
            style: TextStyle(
              fontSize: 12.sp,
              fontWeight: FontWeight.w400,
              color: AppColor.errorColor,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildResendButton() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 24.w),
      child: CommonButton.expend(
        title: logic.isCountingDown
            ? 'Resend code (${logic.countdownSeconds}s)'
            : 'Resend code',
        type: logic.isCountingDown ? ButtonType.disabled : ButtonType.secondary,
        onClick: logic.isCountingDown ? null : () => logic.resendCode(),
      ),
    );
  }
}
